<template>
    <div id="meter" class="bg-white">
        <div class="h-10 flex-between px-4 border-b border-gray-200">
            <span>{{ props.title }}</span>
            <div>
                <a-tag v-if="props.icon === 'user'" color="blue">新增</a-tag>
                <a-tag v-if="props.icon === 'money'" color="orange">新增</a-tag>
                <a-tag v-if="props.icon === 'aTurnover'" color="cyan">新增</a-tag>
                <a-tag v-if="props.icon === 'numberOfCompletedOrders'" color="purple">新增</a-tag>
            </div>
        </div>
        <div class="p-6">
            <div class="flex-between">
                    <count-to class="text-3xl font-normal" :start-val="0" :end-val="Number(props.newlyAddedNumber)" prefix="$" separator="," :decimals="2" :duration="1000"></count-to>
                <div class="w-12 h-12">
                    <img v-if="props.icon === 'user'" :src="user" alt="icon">
                    <img v-if="props.icon === 'money'" :src="money" alt="icon">
                    <img v-if="props.icon === 'aTurnover'" :src="amoutOfMoney" alt="icon">
                    <img v-if="props.icon === 'numberOfCompletedOrders'" :src="complete" alt="icon">
                </div>
            </div>
            <div id="foot-number" class="flex-between mt-8 text-lg">
                <span>总{{ props.title }}</span>
                    <count-to :start-val="0" :end-val="Number(props.total)" prefix="$" separator="," :decimals="2" :duration="1000"></count-to>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import user from '/public/icon/dashboard/add.png'
import money from '/public/icon/dashboard/money.png'
import amoutOfMoney from '/public/icon/dashboard/amountOfMoney.png'
import complete from '/public/icon/dashboard/complete.png'

import { CountTo } from 'vue3-count-to'

const props = defineProps<{
    title: string,
    newlyAddedNumber: number | string,
    total: number | string,
    icon: 'user' | 'money' | 'aTurnover' | 'numberOfCompletedOrders'
}>()
</script>

<style scoped lang="scss">
#meter {
    #foot-number {
        :deep(.ant-statistic-content) {
            font-size: 16px !important;
        }
    }
}
</style>